/* section */
section {padding: 5vw 0;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-weight: 500;font-size: 30px;text-align: left;margin-top: 0;color: #222;letter-spacing: 5px;}
section .title_box .area_title:after{content:'';display: block;width: 6px;height: 2px;background: #56534f;margin-top: 5px;box-shadow: 10px 0 #56534f, 20px 0 #56534f, 30px 0 #56534f, 40px 0 #56534f, 50px 0 #56534f, 60px 0 #56534f, 70px 0 #56534F, 80px 0 #56534f, 90px 0 #56534f, 100px 0 #56534f, 110px 0 #56534f, 120px 0 #56534f, 130px 0 #56534f;}
section .title_box .sub_title {font-weight: 500;font-size: 70px;text-align: left;font-family: "Poppins", sans-serif;color: #1e1e1f;margin-bottom: 0;line-height: 120%;margin-left: -35px;}
section .title_box .sub_title:before{content:'';display: inline-block;width: 15px;height: 15px;background: var(--primary);vertical-align: middle;margin-right: 20px;border-radius: 50px;margin-bottom: 5px;}

section .more { position: relative; margin: 0 50px 0 auto; width: 300px; }
section .more a {padding: 20px 0;width: 250px;background: var(--primary);display: block;text-align: center;}
section .more a font {position: relative;font-size: 16px;color: #fff;z-index: 2;-webkit-transition-duration: .3s;transition-duration: .3s;font-family: "Roboto", sans-serif;}
section .more a span { position: absolute; width: 80px; height: 1px; background: #000; display: block; right: 0; top: calc((100% - 1px) / 2); z-index: 3; -webkit-transition-duration: .2s; transition-duration: .2s; }
section .more a:hover span{right:-10px;}
section .more a span:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 16px 7px 0; border-color: transparent transparent #0c0b19 transparent; right: -1px; bottom: 50%; content: ""; }
section .more a:after { position: absolute; width: 0; height: 100%; background: #d20320; display: block; top: 0; left: 0; content: ""; z-index: 1; -webkit-transition-duration: .2s; transition-duration: .2s; }

/* bg_box */
.bg_box {width: 100%;height: 100%;background: no-repeat 50% / cover;background-attachment: fixed;top: 0;left: 0;}

/* about_area */
#about_area{padding-top:0;}
#about_area:after{content:'';transform: skewX(-40deg);background: #ececec;width: 600px;height: 100%;position: absolute;bottom: 0;}
#about_area .img_box{margin: -115px 0 0;}
#about_area .img_box >div{width:100%;}
#about_area .img_box img{    -webkit-transform: scale(1);}
#about_area .info_box article {margin-bottom: 60px;width: 90%;line-height: 220%;font-weight: 400;text-align: justify;}
#about_area .info_box{margin-left: -30px;}
#about_area .more{position: absolute;left: -100px;}

/* product_area */
#product_area{padding:3vw 0;}
#product_area:after{content:'';position: absolute;right: 150px;top: 0;width: 400px;height: 100%;background: #ececec;z-index: 3;transform: skewX(-40deg);}
#product_area .workframe{position:relative;z-index:4}
#product_area .title_box{position: relative;margin: 0 30px 40px;}
#product_area .title_box .more{position:absolute;right: 0;bottom: 0;}
#product_list .shadow{display:flex;justify-content: space-between;flex-wrap: wrap;align-items: flex-end;margin: 0 30px;}
#product_list .bgBox{width: 65%;order: 2;}
#product_list .info_box{width: 30%;margin-bottom: 50px;}
#product_list .info_box h2{font-size:20px;font-weight: 900;}
#product_list .info_box h3{height:auto;font-size: 20px;}
#product_list .info_box article{-webkit-line-clamp: 3;height: auto;margin-top: 10px;color: #1e1e1f;text-align: justify;}
#product_list .slick-prev{width:62px;height: 62px;left: -10%;}
#product_list .slick-prev:before{content:url(/images/40/arrow-left.png);opacity: 1;}
#product_list .slick-next{width:62px;height: 62px;right: -10%;}
#product_list .slick-next:before{content:url(/images/40/arrow-right.png);opacity: 1;}

/* NewsBox */
#NewsBox {padding: 3vw 0;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#NewsBox .listbox { position: relative; z-index: 2; }
#NewsBox .workframe{width: 1250px;}
#NewsBox .titBox font{color:#fff;font-weight: 500;font-size: 70px;text-align: left;font-family: "Poppins", sans-serif;margin-bottom: 0;line-height: 120%;display: inline-block;}
#NewsBox .titBox font:last-child{font-weight: 500;font-size: 30px;margin-top: 25px;letter-spacing: 5px;margin-left: 20px;}
#NewsBox ul {margin: 3vw 0;border-bottom: 1px solid #333;}
#NewsBox ul li {border-bottom: 1px solid #333;}
#NewsBox ul li a { display: block; font-size: 0; }
#NewsBox ul li a font {width: 80px;display: -webkit-inline-box;color: #fff;}
#NewsBox ul li a font.time { padding: 40px; }
#NewsBox ul li a font.txt {width: calc(100% - 170px);height: auto;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#NewsBox ul li a font.arrow { position: relative; padding: 0; width: 1px; height: 30px; background: #fff; }
#NewsBox ul li:hover a font.arrow{height:40px;}
#NewsBox ul li a font.arrow:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 13px 7px 0 0; border-color: #fff transparent transparent transparent; left: 0; bottom: -1px; content: ""; }

/* book_area */
#book_area .list_box img { height: 450px; }
#book_area .list_box .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_area .list_box .img_box:after { right: 0; bottom: 0; }
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }

/* youtube_box */
#youtube_box { min-height: 1px; padding-bottom: 30%; }
#youtube_box a { position: absolute; background: var(--white); display: flex; top: 50%; left: 50%; z-index: 99; }
#youtube_box a i { margin: auto; font-size: 30px; color: var(--primary); }
#youtube_box iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }

@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }

@media screen and (min-width: 1281px){
	#NewsBox{background-attachment: fixed;}
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
	#custom_box li:hover .row { box-shadow: 0 4px 17px 0 rgba(var(--black-rgb), .2); }
}
@media screen and (max-width: 1680px){
	#product_area .workframe{width: 80%;}
	#about_area .img_box{margin-top:-100px;}
}
@media screen and (max-width: 1440px){
	#about_area .img_box{margin-top: -60px;}
}
@media screen and (max-width: 1366px){
	#NewsBox .workframe{width:90%;}
	#about_area .more{position:relative;}
	#about_area .info_box{margin: 50px 0 0;}
}
@media screen and (max-width: 1024px){
	#custom_area .workframe{width:calc(90% - 100px);}
	#about_area .more{left:0;margin: 0;}
	#about_area .info_box{width: 85%;margin: 50px auto 0;display: block;}
	#product_list .bgBox, #product_list .info_box{width:100%;}
	#product_list .bgBox{order:0}
	#product_list .shadow{margin-top:20px;}
	#NewsBox{padding:5vw 0}
	#about_area:after{height: 55%;}
	#about_area .info_box article{width:100%;}
}
@media screen and (max-width: 768px){
	section, #product_area, #NewsBox{padding:50px 0;}
	#product_area .title_box .more{display:none;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
}
@media screen and (max-width: 640px){
	#NewsBox ul li{padding: 30px 0;}
	#NewsBox ul li a font.txt{width: calc(100% - 20px);}
	#NewsBox ul li a font.time{padding: 0 0 10px;width: 100%;}
	#product_area .workframe{padding-bottom:120px;}
	#product_area .title_box{position:unset;}
	#product_area .title_box .more{display:block;position: absolute;bottom: 0;}
	#product_list .info_box{margin: 20px 0 0;}
	#product_list .shadow{margin: 30px 0 0;}
	section .title_box .area_title, #NewsBox .titBox font:last-child{font-size: 23px;}
	section .title_box .area_title:after{box-shadow: 10px 0 #56534f, 20px 0 #56534f, 30px 0 #56534f, 40px 0 #56534f, 50px 0 #56534f, 60px 0 #56534f, 70px 0 #56534F, 80px 0 #56534f, 90px 0 #56534f, 100px 0 #56534f;}
	section .title_box .sub_title, #NewsBox .titBox font{font-size:55px;}
	#book_area .list_box img { height: 65vw; }
	#product_area:after{width: 190px;right: 355px;opacity: .5;}
	#about_area .title_box{margin-left: 30px;}
	#about_area:after{width: 190px;right: 355px;height: 70%;opacity: .5;}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
}